<template>
  <div>
    <!-- 会员订单列表 -->
    <u-dialog :title="title" :show.sync="show" width="1040px" :auto-close="false" :append-to-body="true" :footer="false" @cancel="cancel" @confirm="confirm">
      <u-table
        row-key="index"
        :data="list"
        :loading="listLoading"
        :options="listOptions"
        :columns="columns"
        :pagination.sync="listQuery"
        :fetch="handleConsumeList"
      >
        <template v-slot:right>
          <el-table-column label="操作" align="center" fixed="right">
            <template slot-scope="{ row }">
              <el-button :disabled="row.mark_Invoicing === 1" type="text" @click="getInvoice(row)">{{ row.mark_Invoicing?'已开票':'申请开票' }}</el-button>
            </template>
          </el-table-column>
        </template>
        <template v-slot:left>
          <el-table-column type="expand">
            <template slot-scope="{row}">
              <div class="orderinfo">
                <div class="goodinfolist">
                  <div class="goodinfotitle">
                    <span>商品名称</span>
                    <span>商品编码</span>
                    <span>商品条码</span>
                    <span>商品单价/元</span>
                    <span>数量</span>
                    <span>商品合计/元</span>
                  </div>
                  <div v-for="goods in row.goodsList" class="goodinfo">
                    <div>
                      {{ goods.goods_name }}
                    </div>
                    <div>
                      {{ goods.goods_code }}
                    </div>
                    <div>
                      {{ goods.goods_barcode }}
                    </div>
                    <div>
                      {{ goods.price }}
                    </div>
                    <div>
                      x{{ goods.num }}
                    </div>
                    <div>
                      {{ goods.z_amount }}
                    </div>
                  </div>
                </div>
                <div class="payinfolist">
                  <div class="payinfotitle">
                    <span>支付类型</span>
                    <span>支付金额/元</span>
                  </div>
                  <div v-for="pay in row.payList" class="payinfo">
                    <div>
                      {{ pay.paymode_name }}
                    </div>
                    <div>
                      {{ pay.paid_amount }}
                    </div>
                  </div>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </u-table>
    </u-dialog>
    <invoice ref="invoiceRef" v-model="showInvoice" :data="invoiceData" @confirm="handleCloseInvoice" />
  </div>
</template>

<script>
/**
 * 业务组件 - 消费明细
 */
import invoice from '@/components/module/invoice.vue'
export default {
  components: { invoice },
  name: 'OrderList',
  model: {
    prop: 'show',
    event: 'changeShow'
  },
  props: {
    /** 是否弹框 */
    show: {
      type: Boolean,
      default: false
    },
    /** 选中的数据 */
    data: {
      type: Object,
      default: data => {
        return ({
          card_id: '',
          member_name: ''
        })
      }
    }
  },
  data() {
    return {
      invoiceData: {},
      showInvoice: false,
      api: this.$u.api.Member,
      // 表格
      columns: [
        {
          prop: 'sale_time',
          label: '交易时间',
          width: '150'
        },
        {
          prop: 'accounting_date',
          label: '记账日期',
          width: '150',
          render: (h, params) => {
            return h('el-tag', params.row.accounting_date)
          }
        },
        {
          prop: 'sale_no',
          label: '订单号',
          width: '200',
          render: (h, params) => {
            return h('el-tag', params.row.sale_no)
          }
        },
        {
          prop: 'z_amount',
          label: '总金额/元',
          width: '100',
          render: (h, params) => {
            const { z_amount } = params.row
            let type = 'success'
            if (z_amount < 0) {
              type = 'danger'
            }
            return h('el-tag', { props: { type }}, z_amount)
          }
        },
        {
          prop: 'disc_amount',
          label: '优惠金额/元',
          width: '100',
          render: (h, params) => {
            return h('el-tag', { props: { type: 'warning' }}, params.row.disc_amount)
          }
        },
        {
          prop: 'paid_amount',
          label: '实付金额/元',
          width: '100',
          render: (h, params) => {
            return h('el-tag', params.row.paid_amount)
          }
        },
        {
          prop: 'fetch_code',
          label: '商友订单号',
          width: '130'
        },
        {
          prop: 'dept_code',
          label: '部门编码'
        },
        {
          prop: 'dept_merch',
          label: '商户'
        },
        {
          prop: 'dept_classify',
          label: '部类'
        },
        {
          prop: 'dept_room',
          label: '课室'
        },
        {
          prop: 'dept_name',
          label: '部门'
        }
      ],
      list: [],
      // 加载数据加载状态
      listLoading: false,
      listOptions: {
        index: true,
        mutiSelect: false,
        stripe: true
      },
      listQuery: {
        page: 1,
        pageSize: 10,
        totalCount: 1,
        card_no: ''
      },
      title: '订单列表'
    }
  },
  watch: {
    show(newVal, oldVal) {
      // 监听是否弹框,决定是否初始化数据
      if (newVal) {
        let { card_no, member_name } = this.data
        if (card_no === null || card_no === undefined) {
          card_no = ''
          member_name = ''
        }
        this.listQuery.card_no = card_no
        this.title = '订单列表:查询【' + member_name + '】'
        this.handleConsumeList()
      }
    }
  },
  methods: {
    // 确认开票
    handleCloseInvoice() {
      this.showInvoice = false
      this.handleConsumeList()
    },
    // 打开开票窗口
    getInvoice(row) {
      this.showInvoice = true
      this.invoiceData = row
      this.$refs.invoiceRef.getInvoiceDetail(row)
    },
    // 获取列表数据
    handleConsumeList() {
      const self = this
      // 打开加载状态
      self.listLoading = true
      // 查询分页数据
      self.api.orderList(self.listQuery).then(res => {
        // 获取分页列表数据
        self.list = res.data.list
        // 获取分页数据,总页数
        self.listQuery.totalCount = res.data.totalCount

        // fix:修复ID重复的问题,设置table表格key值必须唯一
        self.list.forEach((item, index) => {
          self.list[index].index = index
        })

        // 关闭加载状态
        setTimeout(() => {
          self.listLoading = false
        }, 0.5 * 1000)
      })
    },
    // 确认
    confirm() {
      this.$emit('confirm')
    },
    // 关闭或者取消
    cancel() {
      this.$emit('changeShow', false)
      this.$emit('cancel')
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container{
  ::v-deep {
    .filter {
      border: 0;
    }
  }
}
.orderinfo{
  width: 100%;
  display: flex;
  border: 1px solid #dfe6ec;
}

.goodinfolist{
  width: 75%;
  border-right:2px solid #dfe6ec ;
}
.goodinfotitle{
  padding: 10px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.goodinfotitle span {
  width:20%;
}
.goodinfo{
  border-bottom: 1px solid #dfe6ec;
  padding: 10px;
  text-align: center;
  display: flex;
}
.goodinfo div{
  width:20%;
}
.payinfolist{
  width: 25%;
}
.payinfotitle{
  padding: 10px;
  text-align: center;
  display: flex;
  width: 100%;
  background-color: #d5dbe7;
}
.payinfotitle span {
  width:50%;
}
.payinfo{
  display: flex;
  text-align: center;
  padding: 10px;
  border-bottom: 1px solid #dfe6ec;
  align-items: center;
  margin: auto;
}

.payinfo div{
  width:50%;
}
</style>
